<template>
<div class="login_form">
  <el-row type="flex" class="row-bg" justify="center">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" v-if="loding">
            <el-menu-item index="1">
              <router-link :to="{ name: 'login' }" class="nav-link">登录</router-link>
            </el-menu-item>
            <el-menu-item index="2">
              <router-link :to="{ name: 'reg' }" class="nav-link">注册</router-link>
            </el-menu-item>
          </el-menu>
          <span v-else>
              欢迎首次登录
          </span>
        </div>

        <transition name="fade" mode="out-in">
              <router-view></router-view>
        </transition>
    </el-card>
  </el-row>
</div>
</template>

<script>

export default {
  data() {
    return {
      activeIndex: '0',
      loding: true,
    };
  },
  methods: {
    changeroute(to) {
      if (to.path === "lode" || to.name === "welcomefirst") {
        this.loding = false;
      } else {
        this.loding = true;
      }
      if(to.name === "login"){
        this.activeIndex= '1'
      }
      else if(to.name === "reg"){
        this.activeIndex= '2'
      }
    },
  },
  mounted() {
  },
  watch: {
    $route(to) {
      this.changeroute(to);
    },
  },
};
</script>

<style scoped>
@import "../style/welpage.css";

</style>
